<template>
  <!-- 基金搜索头部 -->
  <div id="FundSearchBack">
    <div id="cChead">
      <van-nav-bar
        title="基金搜索"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <!-- 基金搜索导航栏 -->
    <div id="search">
      <form action="/">
        <van-search
          shape="round"
          v-model="value"
          placeholder="请输入产品名称或代码"
          @focus="change1"      
          @input="input"
        />
      </form>
    </div>
    <!-- 搜索发现 -->
    <p id="cCharacters">搜索发现</p>
    <!-- 内容 -->
    <div id="cSearchFind">
      <div id="cSearchFind_top">
        <div id="cSearchFindSection1">农银匠心灵动270天</div>
        <div id="cSearchFindSection2">农银时时付</div>
      </div>
      <div id="cSearchFind_buttom">
        <div id="cSearchFindSection3">天富理财6 0 天B</div>
        <div id="cSearchFindSection4">农银策略精选混合</div>
      </div>
      <!-- 榜单 -->
      <div v-show="hot">
        <van-tabs v-model="activeName" color="antiquewhite">
          <van-tab title="热搜榜" name="a"> </van-tab>
          <van-tab title="产品榜" name="b">
            <div id="cProductList">
              <div id="cklist_back">
                <div
                  id="cklist"
                  v-for="(item, index) in seniority"
                  :key="index"
                 @click="buy"
                >
                  <div id="cklist_left_back">
                    <div id="cklist_left">
                      <van-icon name="award-o" color="red" />
                      <p>{{ index }}</p>
                    </div>
                    <div id="cklist_center">
                      <p>
                        <b>{{ item.fundName }}</b>
                      </p>
                      <p>{{ item.fundNo }}|{{ item.Invest }}</p>
                      <p>人气值</p>
                    </div>
                  </div>
                  <div id="cklist_right">
                    <span
                      ><b>{{ item.yearRate }}%</b></span
                    >
                    <div id="cklist_right_down">
                      <p>业绩比较基准</p>
                      <van-icon name="info-o" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab title="生活榜" name="c"></van-tab>
        </van-tabs>
      </div>
      <!-- // 搜索内容显示 -->
      <div class="product" v-show="seek">
        <h2>产品</h2>
        <div class="productInner">
          <div class="productInner1"  v-for="(item,key) in count" :key="key">
            <div class="productInner-left">
              <p class="field" v-html="item.fundName" ></p>
              <p class="field1">{{ item.fundNo }} | {{ typelist[item.invest-1] }}</p>
            </div>
            <div class="productInner-right">
              <p class="interestRate">{{ item.yearRate }}</p>
              <p class="field1">近一年收益率</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
        <van-empty description="抱歉，没有找到相关结果" v-show="add"/>
    </div>
    
  </div>
</template>

<script>
import { Dialog } from 'vant';
import { FundSearch, search } from "../api/FundSearch";
export default {
  data() {
    return {
      value: "",
      activeName: "b",
      seniority: [],
      num: "",
      hot:true,
      seek:false,
      name:"",
      numberAs:"",
      stock:"",
      interestRateY:"",
      count:[],
      add:false,
      //1 股票型 2债券型 3货币型 4混合型
      typelist:["股票型","债券型","货币型","混合型"]
    };
  },
  created() {
    //基金排行
    this.FundList();
  },
  methods: {
    onClickLeft() {
      // Toast("返回");
      this.$router.push({
        name:"Fund"
      })
    },
    //基金排行
    FundList() {
      FundSearch()
        .then((res) => {
          if (res.code == 200) {
            this.seniority = res.data;
          }else{
            Dialog({ title: "温馨提示", message: res.msg });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    change1(){
        this.hot = false;
    },
    input(){
        if (this.value == "") {
            this.hot = true;
            this.seek = false;
            return;
        }
   
        search({word:this.value}).then((res)=>{
            if (res.data.length==0) {
                if (res.code == 200) {
                  this.add = true;
                  this.seek = false;
                }else{
                  Dialog({ title: "温馨提示", message: res.msg });
                }
                return;
            }
            this.seek = true;
            if (res.code==200 && res.data.length!=0) {
                this.hot = false;
                this.add = false;
                this.count = res.data;   
            }
        })
    },
    buy(){
      this.$router.push({
        name:'funddetails'
      })
    }
  },
};
</script>

<style src="../assets/css/FundSearch.css">

</style>